{% extends 'base.html' %}

{% load notify_tags %}
{% block main %}
    <div class="unit-3-4 unit-1-on-mobile top-gap">
        <div class="bg-white list-group notification-list">
            <div class="flex-bottom list-group-item notification-list-header">
                <h3 class="top-gap-0 unit-0">通知</h3>
                <div class="unit flex-right">
                    <a class="text-muted text-small" href="{% url 'notify:notification_unread' %}">未读</a>
                    <a class="text-muted text-small" href="{% url 'notify:notification_all' %}">全部</a>
                    <a class="text-muted text-small unit-0" href="{% url 'notifications:mark_all_as_read' %}">
                        <i class="fa fa-check" aria-hidden="true"></i> 全部标为已读</a>
                </div>
            </div>
            {% for notification in notifications %}
                <div class="list-group-item notification-item {% if notification.unread %}unread{% endif %}">
                    {% display notification %}
                </div>
            {% empty %}
                <div class="flex-center list-group-item">
                    暂无通知
                </div>
            {% endfor %}
            {% if is_paginated %}
                <div class="flex-center list-group-item">
                    {% include 'blog/_pagination.html' %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock main %}